{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">表单
            </div>
            <div class="panel-body">
                <form id="formAdd" method="post">
                    {% for field in form %}
                        <div class="form-group" style="position: relative;margin-bottom: 30px">
                            {{ field.label }}: {{ field }}
                            <span class="error-msg" style="color: red; position: absolute"></span>
                        </div>
                    {% endfor %}
                    <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                </form>
            </div>
    








            <hr>
            <h1>任务列表</h1>
            <h3>示例1</h3>
            <input id="btn1" type="button" class="btn btn-primary" value="点击"/>

            <h3>示例2</h3>
            <input id="txtUser" type="text" placeholder="用户名"/>
            <input id="txtAge" type="text" placeholder="年龄"/>
            <input id="btn2" type="button" class="btn btn-primary" value="点击"/>

            <h3>示例3</h3>
            <form id="form3">
            <input name="txtUser1" type="text" placeholder="用户名"/>
            <input name="txtAge1" type="text" placeholder="年龄"/>
            <input name="txtEmail1" type="text" placeholder="邮箱"/>
            <input name="txtMore1" type="text" placeholder="介绍"/>
            <input id="btn3" type="button" class="btn btn-primary" value="点击"/>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function () {
            // 页面加载完成后代码自动执行
            {#bindBtn1Event();#}
            bindBtn2Event();
            bindBtn3Event();
            bindBtnAddEvent();
        })
        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",

                    data: {
                            name: $("#txtUser").val(),
                            age: $("#txtAge").val()
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.name)
                        console.log(res.age)
                    },
                })
            })
        }

        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: $("#form3").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.txtUser1)
                        console.log(res.txtAge1)
                        console.log(res.txtEmail1)
                        console.log(res.txtMore1)
                    },
                })
            })
        }

        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {
                $(".error-msg").empty();
                $.ajax({
                    url: '/task/add/',
                    type: "post",
                    data: $("#formAdd").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if(res.status){
                            alert("添加成功")
                        }else {
                            $.each(res.error, function (name, data){
                                $("#id_" + name).next().text(data[0]);
                            })
                        }
                    },
                })
            })
        }
    </script>
{% endblock %}